<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="方案名称">
              <el-input v-model="formInline.name" clearable placeholder="" />
            </el-form-item>
            <el-form-item label="试验信息">
              <el-select v-model="formInline['trialId']" clearable placeholder="请选择">
                <el-option :label="item.trialName" :value="item.trialId" v-for="(item,index) in optionsList" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item label="试验类型">
              <el-select v-model="formInline['trialType']" clearable placeholder="请选择">
                <el-option :label="item.codeName" :value="item.codeName" v-for="(item,index) in effectListOptions" :key="index"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <testhttb  :btnIsShow="{
        operate:false,
        detile:false,
        update:false,
        del:false
      }" @deleteSelectData="deleteSelectData" ref="httbRef" :table-col="tabUserList" :table-data="tableUserData" @refresh="getUserList" />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
    </div>
  </template>
  
  <script>
  import { getToken } from '@/utils/auth'
  import { effectInsert, schemepageList, effectUpdate,effectRemoves,codeManagelistByCodeMain,getInfoPageList } from '@/api/home_/experiment'

  import experiment from '@/mixins/experiment'
  export default {
    components: {
    },
    mixins: [experiment],
    data() {
      return {
        optionsList:[],
        httpUrl: process.env.VUE_APP_BASE_API,
        effectListOptions:[],
        headers: {
          Authorization: 'bearer ' + getToken()
        },
        fileList: [],
        ruleForm: {
          'effectImg': '',
          'effectName': '',
          'effectType': '',
          'effectUrl': '',
          'remark': '',
          'state': ''
        },
        title: '新增',
        rules: {},
        dialogTableVisible: false,
        depList: ['水流', '水压'],
        formInline: {
          name: '',
          trialType: '',
          trialId:""
        },
        tableUserData: [],
        tabUserList: [
        {
            key: 'trialName',
            title: '试验名称'
          },
          {
            key: 'trialType',
            title: '实验类型'
          },
          {
            key: 'name',
            title: '名称'
          },
          {
            key:"description",
            title:"描述"
          },
          {
            key: 'createTime',
            title: '创建时间'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
      codeManagelistByCodeMain('trial_type').then(res=>{
        this.effectListOptions = res.data
      })
      getInfoPageList({
        data: {
          'trialName':'',
          'trialType':''
        },
        'size':1000,
        'current':1
      }).then(res => {
        this.optionsList = res.data.records
      })
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
      deleteSelectData(v) {
        effectRemoves({ ids: [v.effectId] }).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
  
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        // return isJPG && isLt2M;
        return isLt2M
      },
      onSuccess(v) {
        this.ruleForm.effectImg = v.data
      },
      handleRemove(file, fileList) {
      },
      handlePreview(file) {
      },
      handleExceed(files, fileList) {
        // this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${file.name}？`)
      },
      commitFromData() {
        if (this.ruleForm.hasOwnProperty('id')) {
          effectUpdate(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        } else {
          effectInsert(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        }
      },
      handleSizeChange(v) {
        this.page = 1
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },
      // 获取用户列表
      getUserList() {
        this.dialogTableVisible = false
        schemepageList(
          {
          "size":this.size,
          "current":this.page,
          "data": this.formInline
          }).then(res => {
          this.tableUserData = res.data.records
          this.total = res.data.total
        })
      }
    }
  }
  </script>
  
    <style lang="scss" scoped>
    .el-select{
      width:100%;
    }
      .timing{
        background:#fff;
        padding:20px;
      }
      .autoClass{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      .el-form-item{
          width:50%;
      }
  }
    </style>
  